<!-- 模板 -->
<template>
<el-dialog :visible.sync="show"
  :close-on-click-modal="false"
  :append-to-body="true"
  class="_this-dialog"
  :class="{'hide-title': hideTitle, 'is-center': isCenter}"
  :title="title"
  :width="width">
  <slot v-if="$scopedSlots.title" slot="title" name="title"></slot>
  <div class="_this-body" :style="{padding: contentPadding, 'min-height': minHeight}"
    v-loading="loading"
    :element-loading-text="loadingText">
    <slot></slot>
  </div>
  <slot v-if="$scopedSlots.footer" slot="footer" name="footer"></slot>
</el-dialog>
</template>
<script>
export default {
  model: {
    prop: 'visible',
    event: 'change'
  },
  props: {
    // 显示
    visible: {
      default: false
    },
    // 标题，如果标题title为空，默认不显示标题
    title: {
      default: ''
    },

    // 弹窗是否上下居中
    isCenter: {
      default: true
    },
    // 宽度
    width: {
      default: '500px'
    },
    // content的padding
    contentPadding: {
      default: '25px 20px'
    },
    // content最小高度
    minHeight: {
      default: '50px'
    },

    // content显示加载中
    loading: {
      default: false
    },
    // 加载中显示文本
    loadingText: {
      default: '拼命加载中'
    }
  },
  computed: {
    // 显示隐藏
    show: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('change', val);
      }
    },
    // 是否隐藏标题
    hideTitle () {
      return !this.$scopedSlots.title && !this.title ? true : false;  
    }
  },
}
</script>
<style lang="scss">
._this-dialog {
  text-align: center;
  &.is-center {
    &:after {
      content: '';
      display: inline-block;
      width: 0;
      height: 100%;
      vertical-align: middle;
    }
    .el-dialog {
      display: inline-block;
      margin: 0 !important;
      vertical-align: middle;
    }
  }
  .el-dialog {
    text-align: left;
    border-radius: 5px;
    overflow: hidden;
  }
  .el-dialog__header {
    position: relative;
    padding: 15px;
    background: #fff;
    border-bottom: 1px solid #EDEDED;
    .el-dialog__title {
      height: 24px;
      line-height: 24px;
      font-size: 16px;
      font-family: Microsoft YaHei;
    }
    .el-dialog__headerbtn {
      top: 50%;
      margin-top: -8px;
      width: 16px;
      height: 16px;
    }
  }
  .el-dialog__body {
    padding: 0;
    max-height: calc(100vh - 200px);
    overflow: auto;
    box-sizing: border-box;
  }
  .el-dialog__footer {
    border-top: 1px solid #ededed;
    padding: 10px 15px;
  }


  &.hide-title {
    .el-dialog__header {
      display: none;
    }
  }
}
</style>